<template>
  <div class="page">
    <h2>示例 - 自定义表头和内容(render)</h2>
    <vue-tabulation
      ref="grid"
      :dataSource="dataSource"
      :columns="transformColumns"
      :height="500"
      :hasIndex="true"
      :hasCheckbox="true"
      showSummary
      @header-click="handleHeaderClick"
      @body-click="handleBodyClick"
    ></vue-tabulation>
    <p>
      <button @click="update">refresh</button>
    </p>
  </div>
</template>

<script>
import HeaderCellComp from './HeaderCellComp'
// import BodyCellComp from './BodyCellComp'
export default {
  name: 'demo-cell-render',
  data() {
    return {
      ageFixed: false,
      dateFixed: false,
      dataSource: [],
      columns: [],
    }
  },
  computed: {
    transformColumns() {
      let self = this
      return this.columns.map(item => {
        if (item.prop === 'name') {
          // eslint-disable-next-line
          item.headerCellRender = function(h, { label, index, column }) {
            return h(
              'button',
              {
                style: {
                  color: 'red',
                },
                on: {
                  click: () => {
                    this.$emit('header-click', column)
                  },
                },
              },
              label + ':' + index
            )
          }
          // eslint-disable-next-line
          item.bodyCellRender = function(h, { value, prop, index, row }) {
            return h(
              'i',
              {
                style: {
                  border: '1px solid green',
                },
                on: {
                  click: () => {
                    this.$emit('click', value)
                  },
                },
              },
              value
            )
          }
        }
        if (item.prop === 'age') {
          // eslint-disable-next-line
          item.headerCellRender = function(h, { label, index, column, parent }) {
            return h(
              HeaderCellComp,
              {
                props: {
                  index: index,
                  label: label,
                  column: column,
                },
                on: {
                  'header-click': (...arg) => {
                    // arg => [index, label, column]
                    // console.log('02: header-click', arg)
                    // this => table-header-cell
                    // console.log(this.$options.name)
                    // parent => vue-tabulation
                    // console.log(parent.$options.name)
                    // self => demo-cell-render
                    // console.log(self.$options.name)
                    // this.$emit('header-click', ...arg)
                    self.handleHeaderClick(...arg)
                  },
                },
              },
              label + ':' + index
            )
          }
        }
        return item
      })
    },
  },
  created() {
    this.getUI().then(columns => {
      this.columns = columns
      console.log('columns loaded')
      this.getData().then(data => {
        this.dataSource = data
        console.log('data loaded')
      })
    })
  },
  methods: {
    getUI() {
      return new Promise(resolve => {
        setTimeout(() => {
          resolve(this.$mock.columns())
        }, 200)
      })
    },
    getData() {
      return new Promise(resolve => {
        setTimeout(() => {
          resolve(this.$mock.dataSource(100))
        }, 300)
      })
    },
    update() {
      this.getData().then(data => {
        this.dataSource = data
        console.log('data loaded')
      })
    },
    handleHeaderClick() {
      console.log('vue-tabulation: header-click', arguments)
    },
    handleBodyClick() {
      console.log('vue-tabulation: body-click', arguments)
    },
  },
}
</script>
